<template>
    <div class="myEZUIKit" :id="props.config.id" ref="viewtools">
    </div>
</template>
  

<script setup>
import EZUIKit from "ezuikit-js";
import { defineComponent, watch, ref, reactive, onMounted, onUnmounted } from "vue";
const props = defineProps({
    config: {
        type: Object,
        default: () => ({
            id: 'id',
            url: "",
            token: "",
        })
    }
});
let ezvizTarget = ref(null);
let url = ref('');
let viewtools = ref(null);
const InitAutoVideoOne = async (config) => {
    if (!ezvizTarget.value && config) {
        await CreatedVideo(config)
    } else if (!ezvizTarget.value && props.config.url && props.config.url.length) {
        await CreatedVideo(props.config)
    } else {
    }
}

const CreatedVideo = (config) => {
    url.value = config.url
    // 获取父节点的宽高
    let divW = viewtools.value.clientWidth
    let divH = viewtools.value.clientHeight
    ezvizTarget.value = new EZUIKit.EZUIKitPlayer({
        autoplay: true,  // 默认播放
        //视频播放包裹元素
        id: config.id + '',
        //萤石token
        accessToken: config.token,
        // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
        url: config.url, // 播放地址
        // template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
        plugin: ['talk'], // 加载插件，talk-对讲
        // 视频下方底部控件
        footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width: divW,
        height: divH || 205,
        themeData: {
            poster: '../../../../src/assets/videoDemo.png',
            header: {
                color: '#fff',
                activeColor: '#FFFFFF',
                backgroundColor: '#000000',
                btnList: [
                    {
                        iconId: 'deviceID',
                        part: 'left',
                        defaultActive: 0,
                        memo: '顶部设备序列号',
                        isrender: 1,
                    },
                    {
                        iconId: 'deviceName',
                        part: 'left',
                        defaultActive: 0,
                        memo: '顶部设备名称',
                        isrender: 1,
                    },
                    {
                        iconId: 'cloudRec',
                        part: 'right',
                        defaultActive: 0,
                        memo: '云存储',
                        isrender: 0,
                    },
                    {
                        iconId: 'rec',
                        part: 'right',
                        defaultActive: 0,
                        memo: 'SD卡回放',
                        isrender: 0,
                    },
                ],
            },
            footer: {
                color: '#FFFFFF',
                activeColor: '#1890FF',
                backgroundColor: '#00000021',
                btnList: [
                    {
                        iconId: 'capturePicture',
                        part: 'left',
                        defaultActive: 0,
                        memo: '截屏按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'sound',
                        part: 'left',
                        defaultActive: 0,
                        memo: '声音按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'pantile',
                        part: 'left',
                        defaultActive: 0,
                        memo: '云台控制按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'recordvideo',
                        part: 'left',
                        defaultActive: 0,
                        memo: '录制按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'talk',
                        part: 'left',
                        defaultActive: 0,
                        memo: '对讲按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'zoom',
                        part: 'left',
                        defaultActive: 0,
                        memo: '电子放大',
                        isrender: 1,
                    },
                    {
                        iconId: 'hd',
                        part: 'right',
                        defaultActive: 0,
                        memo: '清晰度切换按钮',
                        isrender: 1,
                    },
                    {
                        iconId: 'expend',
                        part: 'right',
                        defaultActive: 0,
                        memo: '全局全屏按钮',
                        isrender: 1,
                    },
                ],
            },
        },
    })
}
const destroy = () => {
    if (ezvizTarget.value) {
        ezvizTarget.value.destroy();
    }

}
window.addEventListener('resize', () => {
    let divW = viewtools.value.clientWidth
    let divH = viewtools.value.clientHeight
    ezvizTarget.value?.reSize(divW, divH)
});
watch(() => props.config, async (newVal, old) => {
    if (ezvizTarget.value) {
        ezvizTarget.value.changePlayUrl({
            url: newVal.url,
            accessToken: newVal.token,
            deviceSerial: newVal.id,
        }
        )
    } else {
        CreatedVideo(newVal)
    }
})

defineExpose({ InitAutoVideoOne, id: props.config.id, destroy, ezvizTarget, url });
onMounted(InitAutoVideoOne);
// onUnmounted(destroy)
</script>

<style scoped lang="less">
.myEZUIKit {
    width: 100%;
    height: 100%;
    /* background-image: url(./img/GroupPic.png); */
    background-size: 100% 100%;
    background-repeat: no-repeat;


    /* min-height: 600px; */
}
</style>